<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<title>劲松商城后台</title>
<div th:include="Admin/public/Common::head"></div>
</head>
<body>
<div class="main-wrap">
	<div th:include="Admin/public/Common::menu"></div>
	<div class="content-wrap">
<div th:replace="Admin/public/Common::header"></div>
		<main class="main-cont content mCustomScrollbar">
			<div class="page-wrap">
				<!--开始::内容-->
				<section class="page-hd">
					<header>
						<h2 class="title">按钮系列展示</h2>
						<p class="title-description">
							按钮系列，具体按钮选择根据页面结构布局色彩搭配
						</p>
					</header>
					<hr>
				</section>
				<table class="table table-bordered table-striped">
					<thead>
						<tr>
							<th>基础按钮</th>
							<th>线性按钮</th>
							<th>圆角按钮</th>
							<th>按钮尺寸</th>
						</tr>
					</thead>
					<tbody>
						<tr class="cen">
							<td>
								<button class="btn btn-primary">基础按钮</button>
							</td>
							<td>
								<button class="btn btn-primary-outline">线性按钮</button>
							</td>
							<td>
								<button class="btn btn-primary radius">圆角按钮</button>
							</td>
							<td>
								<button class="btn btn-primary-outline radius size-s">按钮尺寸</button>
							</td>
						</tr>
						<tr class="cen">
							<td>
								<button class="btn btn-secondary">基础按钮</button>
							</td>
							<td>
								<button class="btn btn-secondary-outline">线性按钮</button>
							</td>
							<td>
								<button class="btn btn-secondary radius">圆角按钮</button>
							</td>
							<td>
								<button class="btn btn-secondary-outline radius size-m">按钮尺寸</button>
							</td>
						</tr>
						<tr class="cen">
							<td>
								<button class="btn btn-info">基础按钮</button>
							</td>
							<td>
								<button class="btn btn-info-outline">线性按钮</button>
							</td>
							<td>
								<button class="btn btn-info radius">圆角按钮</button>
							</td>
							<td>
								<button class="btn btn-info-outline radius size-l">按钮尺寸</button>
							</td>
						</tr>
						<tr class="cen">
							<td>
								<button class="btn btn-warning">基础按钮</button>
							</td>
							<td>
								<button class="btn btn-warning-outline">线性按钮</button>
							</td>
							<td>
								<button class="btn btn-warning radius">圆角按钮</button>
							</td>
							<td>
								<button class="btn btn-warning-outline radius size-l">按钮尺寸</button>
							</td>
						</tr>
						<tr class="cen">
							<td>
								<button class="btn btn-danger">基础按钮</button>
							</td>
							<td>
								<button class="btn btn-danger-outline">线性按钮</button>
							</td>
							<td>
								<button class="btn btn-danger radius">圆角按钮</button>
							</td>
							<td>
								<button class="btn btn-danger-outline radius size-xl">按钮尺寸</button>
							</td>
						</tr>
						<tr class="cen">
							<td>
								<button class="btn btn-danger radius-rounded">椭圆形边角</button>
							</td>
							<td colspan="3">
								<button class="btn btn-danger-outline btn-block">100%通行按钮</button>
							</td>
						</tr>
					</tbody>
				</table>
				<!--开始::结束-->
			</div>
		</main>
		<div th:replace="Admin/public/Common::footer"></div>
	</div>
</div>

<div class="mask"></div>
<div class="dialog">
	<div class="dialog-hd">
		<strong class="lt-title">标题</strong>
		<a class="rt-operate icon-remove JclosePanel" title="关闭"></a>
	</div>
	<div class="dialog-bd">
		<!--start::-->
		<p>这里是基础弹窗,可以定义文本信息，HTML信息这里是基础弹窗,可以定义文本信息，HTML信息。</p>
		<!--end::-->
	</div>
	<div class="dialog-ft">
		<button class="btn btn-info JyesBtn">确认</button>
		<button class="btn btn-secondary JnoBtn">关闭</button>
	</div>
</div>
</body>
</html>
